<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5动画实例代码</title>
</head>
<body>
<canvas width="800" height="500" id="canvas">
   对不起，您的浏览器不支持HTML5。 
</canvas>
<script  language="javascript" type="text/javascript">
var f = 50;
function play() {
   var ctx = document.getElementById('canvas').getContext('2d');//画布
   //ctx.clearRect();
   ctx.fillStyle = "#FFF0C0";
   ctx.fillRect(0,0,800,500);
   drawSky(ctx , 0 , 0 , 800 , 250);//画天空
   if(f <= -100) {
      f = 50;
   }
   f -= 2;   
   for(var i=0; i<7; i++){
      drawTree(ctx , f+(i*150) , 120);//画树
   }
}
function drawSky(ctx , x , y , w , h) {
   var l = ctx.createLinearGradient(x , y , x , y+h);
   l.addColorStop(0, '#0000FF');
   l.addColorStop(1, '#E0E0FF');
   ctx.fillStyle = l;
   ctx.fillRect(x,y,w,h);

}
function drawTree(ctx , x , y) {
   ctx.fillStyle = "#008000";
   ctx.beginPath();
   ctx.moveTo(x , y);
   ctx.lineTo(x - 40 , y+50);
   ctx.lineTo(x - 20 , y+50);
   ctx.lineTo(x - 50 , y+100);
   ctx.lineTo(x + 50 , y+100);
   ctx.lineTo(x + 20 , y+50);
   ctx.lineTo(x + 40 , y+50);
   ctx.fill();
   ctx.beginPath();
   ctx.fillStyle = "#BF6000";
   ctx.rect(x-10, y+100, 20, 50);
   ctx.fill();
}
function init(){
   if(!document.getElementById('canvas').getContext('2d')){
      return;
   }
   window.setInterval("play()" , 50);
}
init();
</script>
</body>
</html>